@font-color: #2c2c2c;
@timeline-baseline-color: #fff;
@timeline-load-color: #c1c2c3;
@timeline-paly-color: #555;
@timeline-activepoint-color: #ffffff;

.show {
    display: flex;
}

.hide {
    display: none;
}

#demo1 {
    width: 90%;
    height: 70%;
    margin: 0 auto;
}

.lkaudio {
    // display: inline-flex;
    display: flex;
    z-index: 500;
    height: 100%;
    width: 100%;
    border-radius: 0.5rem;
    background-color: #f1f3f4;
    align-items: center;

    .lka-play-control {
        .lka-play-button ,.lka-pause-button {
            margin: 0 15px 0 25px;
            height: 20px;
            width: 15px;
        }
    }

    .lka-time {
        font-size: 14px;
        color: @font-color;
    }
    
    .lka-timeline {
        display: inline-flex;
        align-items: center;
        margin: 0 25px 0 15px;
        flex: 1;
        width: 40%;

        .lka-timeline-baseline {
            display: inline-flex;
            position: relative;
            align-items: center;
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background-color: @timeline-baseline-color;
            
                .lka-timeline-load {
                    display: inline-flex;
                    position: absolute;
                    width: 100%;
                    height: 8px;
                    border-radius: 5px;
                    background-color: @timeline-load-color;
                }

                .lka-timeline-play {
                    display: inline-flex;
                    position: absolute;
                    z-index: 999;
                    height: 8px;
                    border-radius: 5px;
                    background-color: @timeline-paly-color;
                }

                .lka-timeline-activepoint {
                    display: inline-flex;
                    position: relative;
                    z-index: 1000;
                    height: 12px;
                    width: 12px;
                    margin-left: -6px;
                    border: 2px solid @timeline-paly-color;
                    border-radius: 8px;
                    background-color: @timeline-activepoint-color;
                }

                // .lka-timeline-activepoint:hover {
                //     transform:scale(1.2);
                //     transition:all 0.2s;
                //     -moz-transition:all 0.2s;
                //     -webkit-transition:all 0.2s;
                //     -o-transition:all 0.2s;
                // }
        }

    }

    .lka-volume-control {
        .lka-volume-button, .lka-volume-close-button {
            height: 20px;
            width: 20px;
            
            margin: 0 20px 0 0;
        }
    }

    .lka-more {
        height: 100%;
        .lka-more-button {
            height: 100%;
            margin: 0 20px 0 10px;
            width: 0.36rem;
        }
    }
}

.forbid-text-selected { 
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    user-select:none;
  }